<template>
	<view class="d_content" v-if="Object.keys(details).length!==0">
		<image class="b_img" :src="details.images.small"></image>
		<view class="shade">
			<image class="t_img" :src="details.images.small"></image>
			<view class="blank">
				<view class="title">{{details.title}}</view>
				<view class="eva" v-if="details.rating.average!==0">
					<view>评分：{{details.rating.average}}</view>
				</view>
				<view class="des">
					<view>摘要</view>
				</view>
				<view class="sum">
					<view>{{details.summary}}</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {details} from "../../apis"
	export default {
		data() {
			return {
				details:{}
			};
		},
		onLoad(option) {
			// console.log("detail页面"+option)
			uni.showLoading({
			    title: '加载中'
			});
			details(option.id).then((res)=>{
				let [err,data]=res
				// console.log(data.data)
				this.details=data.data
				// console.log(this.details)
				uni.hideLoading();
			})
		}
	}
</script>

<style lang="scss" scoped>
	.d_content{
		position: fixed;
		top: 0;
		buttom:0;
		left: 0;
		right: 0;
		width: 100%;
		height: 100%;
		.b_img{
			width: 100%;
			height: 100%;
		}
		.shade{
			width: 100%;
			height: 100%;
			background: rgba(255,255,255,0.7);
			z-index: 100;
			position: absolute;
			top: 0;
			left: 0;
			text-align:center;
			// 设置页面内容在y轴上居中显示，可以使超出页面的内容隐藏起来，通过滚动条显示
			overflow-y: auto;
			.t_img{
				width: 640upx;
				height:800upx;
				margin-top:40upx;
			}
			.blank{
				text-align:left;
				padding-left: 50upx;
				.title{
					text-align: center;
					font-size: 17px;
					font-weight: 900;
				}
				.eva{
					font-size: 14px;
				}
				.des{
					font-size: 16px;
					font-weight: 700;
				}
				.sum{
					font-size: 14px;
					margin-top:20upx;
					margin-right:20upx;
				}
				
			}
		}
		
	}
</style>
